<template>
    <div style="width: 100%;float: right;display: flex;justify-content: flex-end;">
        <!-- 操作菜单栏 -->
            <div class="right-frame" v-if="editShow == false">
              <!-- 群名称 -->
               <div v-if="messageDetail.type == 1">
                <div class="right-frame-title flexal" @click="editShow = true">
                    <img :src="avatar"  style="width: 68px;height: 68px;border-radius: 50%;" />
                    <div class="ellipsis title-text" style="width: 220px;font-size: 18px;margin-left: 17px;flex:1;">群聊名称名称名称名称</div>
                    <div>
                    <el-tooltip  effect="dark" content="群二维码" placement="top">
                    <img :src="qrCode"  style="width: 25px;height: 25px;" @click.stop="openQrcodeClick" />
                    </el-tooltip>
                    <div class="title-qrCode-frame flexcumal" v-if="openQrcode">
                        <div style="font-weight: 500;font-size: 14px;color: #FFFFFF;margin-top: 32px;">群名称群名称群名称</div>
                        <img :src="qrCode"  style="width: 174px;height: 174px;margin-top: 46px;" />
                        <div style="font-weight: 400;font-size: 12px;color: #000000;margin-top: 22px;">仅限企业内部成员加入</div>
                        <div style="font-weight: 400;font-size: 11px;color: #8D8D8D;margin-top: 11px;">该二维码7天内（7月30日前）有效</div>
                        <div class="flexal" style="margin-top: 18px;">
                            <div class="saveQrCode flexcen">保存图片</div>
                            <div class="shareQrCode flexcen">分享</div>
                        </div>
                    </div>
                    </div>
                    <img :src="require('@/assets/img/right.png')"  style="width: 10px;height: 16px;margin-left: 14px;" />
                </div>
                <div class="right-line-bottom"></div>
                </div>
                <!-- 群成员 -->
                 <div v-if="messageDetail.type == 1">
                <div class="right-frame-title flexal" style="padding-top: 22px;padding-bottom: 0px;">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">群成员</div>
                    <div  class="right-tips-text">3</div>
                    <img :src="require('@/assets/img/right.png')"  style="width: 10px;height: 16px;margin-left: 14px;" />
                </div>
                <!-- 群成员头像 -->
                <div class="flexal" style="flex-wrap: wrap;">
                    <img :src="item"  style="width: 50px;height: 50px;border-radius: 50%;margin-left: 16px;margin-top: 17px;" v-for="(item,index) in peopleList" :key="index" />
                    <img :src="require('@/assets/img/messageRight/peopleAdd.png')"  style="width: 50px;height: 50px;border-radius: 50%;margin-left: 16px;margin-top: 17px;" @click="dialogVisibleMember = !dialogVisibleMember" />
                    <img :src="require('@/assets/img/messageRight/peopleLess.png')"  style="width: 50px;height: 50px;border-radius: 50%;margin-left: 16px;margin-top: 17px;" />
                </div>
                <div class="right-line-bottom" style="margin-top: 15px;"></div>
                </div>
                <!-- 群应用 -->
                 <div v-if="messageDetail.type == 1">
                <div class="right-frame-title flexal" style="padding-bottom: 0px;">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">群应用</div>
                </div>
                <div class="right-frame-title flexal" style="flex-wrap: wrap;">
                    <div style="width: 25%;flex-direction: column;" class="flexcen" @click="dialogVisibleNotice = !dialogVisibleNotice">
                    <img :src="require('@/assets/img/messageRight/groupNotice.png')"  style="width: 25px;height: 25px;"/>
                    <div style="margin-top: 5px;" class="right-tips-text">群公告</div>
                  </div>
                </div>
                <div class="right-line-bottom"></div>
                </div>
                <!-- 搜索会话内容 -->
                <div class="right-frame-title flexal" style="padding-bottom: 0px;">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">搜索会话内容</div>
                </div>
                <div class="flexal" style="flex-wrap: wrap;padding-top: 22px;padding-bottom: 22px;">
                    <div style="width: 20%;flex-direction: column;" class="flexcen"  v-for="(item,index) in searchList" :key="index" @click="openSearchMessage(index)">
                    <img :src="item.icon"  style="width: 27px;height: 27px;"/>
                    <div style="margin-top: 5px;" class="right-tips-text">{{item.text}}</div>
                    </div>
                </div>
                <div class="right-line-bottom"></div>
                <!-- 群昵称 -->
                 <div v-if="messageDetail.type == 1">
                <div class="right-frame-title flexal">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">群昵称</div>
                    <div  class="right-tips-text">哈哈哈哈哈哈哈哈哈哈哈哈</div>
                    <img :src="require('@/assets/img/right.png')"  style="width: 10px;height: 16px;margin-left: 14px;" />
                </div>
                <div class="right-line-bottom"></div>
                </div>
                <!-- 消息免打扰 -->
                <div class="right-frame-title flexal">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">消息免打扰</div>
                    <el-switch v-model="noDisturbing" active-color="#0052D9" inactive-color="#DCDFE6"></el-switch>
                </div>
                <div class="right-line-bottom"></div>
                <!-- @所有人的消息不提示 -->
                 <div v-if="messageDetail.type == 1">
                <div class="right-frame-title flexal">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">@所有人的消息不提示</div>
                    <el-switch v-model="noHintAll" active-color="#0052D9" inactive-color="#DCDFE6"></el-switch>
                </div>
                <div class="right-line-bottom"></div>
                </div>
                <!-- 置顶会话 -->
                <div class="right-frame-title flexal">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">置顶会话</div>
                    <el-switch v-model="topMessage" active-color="#0052D9" inactive-color="#DCDFE6"></el-switch>
                </div>
                <div class="right-line-bottom"></div>
                <!-- 进群验证 -->
                 <div v-if="messageDetail.type == 1">
                <div class="right-frame-title flexal">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">进群验证</div>
                    <el-switch v-model="enterVerify" active-color="#0052D9" inactive-color="#DCDFE6"></el-switch>
                </div>
                </div>
                <!-- 清空聊天记录 -->
                <div class="right-frame-title flexal" @click="dialogVisibleDelete = !dialogVisibleDelete">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 16px;flex:1;">清空聊天记录</div>
                    <img :src="require('@/assets/img/messageRight/delete.png')"  style="width: 22px;height: 24px;margin-left: 14px;" />
                </div>

                <div class="right-frame-title flexcen" style="margin-bottom: 30px;" v-if="messageDetail.type == 1">
                  <el-button style="height: 45px;width: 96px;font-size: 18px;border-radius: 8px;background: #FFFFFF;border: 2px solid #D54941;color: #D54941;">退出群组</el-button>
                  <el-button style="height: 45px;width: 96px;font-size: 18px;border-radius: 8px;background: #D54941;margin-left: 30px;">解散群组</el-button>
                </div>
            </div>

            <!-- 编辑群信息 -->
            <div class="right-frame" v-else>
                <!-- 编辑群信息 -->
                <div class="right-frame-title flexal">
                    <img :src="require('@/assets/img/right.png')"  style="width: 10px;height: 16px;transform: rotate(180deg)"  @click="editShow = false"/>
                    <div  class="right-tips-text" style="font-size: 16px;margin-left: 20px;flex: 1;">编辑群信息</div>
                    <img :src="require('@/assets/img/cancel.png')"  style="width: 18px;height: 18px;" @click="editShow = false" />
                </div>

                <!-- 群头像 -->
                <div class="right-frame-title flexal">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 14px;flex:1;color: #333333;">群头像</div>
                    <img :src="avatar"  style="width: 53px;height: 53px;border-radius: 50%;" />
                    <img :src="require('@/assets/img/right.png')"  style="width: 10px;height: 16px;margin-left: 14px;" />
                </div>
                <div class="right-line-bottom"></div>

                <div class="right-frame-title">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 14px;flex:1;color: #333333;">群名称</div>
                     <div class="flexal" style="margin-top: 20px;">
                    <el-input v-model="groupName" class="enterpriseName" placeholder="请输入群名称" style="width:100px;"></el-input>
                    <img :src="require('@/assets/img/navigation/edit.png')"  style="width: 14px;height: 14px;" />
                    </div>
                </div>

                <div class="right-line-bottom"></div>
                <!-- 群二维码 -->
                <div class="right-frame-title flexal">
                    <div class="ellipsis title-text" style="width: 220px;font-size: 14px;flex:1;color: #333333;">群二维码</div>
                    <img :src="qrCode"  style="width: 40px;height: 40px;" />
                    <img :src="require('@/assets/img/right.png')"  style="width: 10px;height: 16px;margin-left: 14px;" />
                </div>
                <div class="right-line-bottom"></div>
            </div>

            <!-- 添加群成员弹窗 -->
             <memberPop :dialogVisibleShow="dialogVisibleMember" @updateDialog="updateDialogClick" :list="list"></memberPop>
             <!-- 群公告编辑弹窗 -->
             <noticePop :dialogVisibleShow="dialogVisibleNotice" @updateDialog="updateDialogClick"></noticePop>
             <!-- 搜索会话内容弹窗 -->
             <searchMessage v-if="searchMessageShow" :index="searchMessageIndex" @updateDialog="updateDialogClick"></searchMessage>
             <!-- 删除聊天记录弹窗 -->
             <detelePop :dialogVisibleShow="dialogVisibleDelete"></detelePop>
    </div>
  </template>
  
  <script>
  import memberPop from '../pop-up/memberPop.vue'
  import noticePop from '../pop-up/noticePop.vue'
  import searchMessage from '../message/searchMessage.vue'
  import detelePop from '../pop-up/detelePop.vue'
  export default {
    name: 'optMessage',
    props: {
        messageDetail: {
            type: Object,
            default: {}
      }
    },
    data(){
        return {
            avatar:require('@/assets/img/messageRight/group.png'),  //最顶部聊天界面头像
            
            peopleList:['https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg'],       //成员头像集

            searchList:[                                                                //搜索会话内容
                {
                    text:'消息',
                    icon:require('@/assets/img/messageRight/messageRecord.png')
                },
                {
                    text:'云文档',
                    icon:require('@/assets/img/messageRight/cloudRecord.png')
                },
                {
                    text:'文件',
                    icon:require('@/assets/img/messageRight/fileRecord.png')
                },
                {
                    text:'图片/视频',
                    icon:require('@/assets/img/messageRight/imageRecord.png')
                },
                {
                    text:'链接',
                    icon:require('@/assets/img/messageRight/linkRecord.png')
                },
            ],

            qrCode:require('@/assets/img/messageRight/qrCode.png'),  //二维码图片
            noticeShow:true,                          //是否显示公告
            noDisturbing:false,                       //消息免打扰
            noHintAll:false,                          //@所有人的消息不提示 
            topMessage:false,                         //置顶会话
            enterVerify:false,                        //进群验证
            groupName:'',                             //群名称
            editShow:false,                           //是否编辑群信息
            // 组织成员
            list:[
                {
                    name:'王小二',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    checked:false
                },
                {
                    name:'王小明',
                    avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
                    checked:false
                },
                {
                    name:'李二',
                    avatar:'https://cdn.uviewui.com/uview/album/3.jpg',
                    checked:false
                },
                {
                    name:'张三',
                    avatar:'https://cdn.uviewui.com/uview/album/4.jpg',
                    checked:false
                },
                {
                    name:'老四',
                    avatar:'https://cdn.uviewui.com/uview/album/5.jpg',
                    checked:false
                },
                {
                    name:'王五',
                    avatar:'https://cdn.uviewui.com/uview/album/6.jpg',
                    checked:false
                },
                {
                    name:'老六',
                    avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
                    checked:false
                },
                {
                    name:'老王',
                    avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
                    checked:false
                },
                {
                    name:'老李',
                    avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
                    checked:false
                },
            ],
            searchMessageIndex:0,               //要搜索的内容下标
        }
    },
    components:{
        memberPop,
        noticePop,
        searchMessage,
        detelePop
    },
    created(){
    document.addEventListener("click", this.myFunction);
    },
    methods:{
        openQrcodeClick(){
            this.openQrcode = !this.openQrcode
            this.$overlay.show();
        },
        openSearchMessage(index){
            console.log('index',index)
            this.searchMessageShow = !this.searchMessageShow
            this.searchMessageIndex = index
            this.$overlay.show();
            
        },
        updateDialogClick(){
            // console.log('我被调用了')
            this.dialogVisibleMember = false
            this.dialogVisibleNotice = false
            this.searchMessageShow = false
            this.dialogVisibleDelete = false
        }
    }

  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
  .right-frame{
        margin-top: 0px;
        position: absolute;
        width: 457px;
        height: 750px;
        background: #F8F9FA;
        z-index: 101; /* Ensure it sits on top of other content */
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        overflow-y: auto;
        overflow-x: hidden;

        .title-text{
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        }
        .right-frame-title{
            padding: 15px 16px;
        }
        .right-line-bottom{
            margin-left: 16px;
            width: 424px;
            height: 0px;
            border: 1px solid #707070;
            opacity: 0.32;
        }
        .right-tips-text{
            font-weight: 400;
            color: #6B6B6B;
            font-size: 14px;
        }
        .el-button {
            // width: 96px;
            // height: 45px;
            padding: 0px 0px;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, 0.3);
            font-size: 24px;
            color: rgba(255, 255, 255, 1);
            border: transparent;
            overflow: hidden;
          // &:hover{
          //   background: #ecf5ff;
          //   color: #fff;
          // }
          // &:focus{
          //   background: #ecf5ff;
          //   color: #fff;
          // }
        }

        .title-qrCode-frame{
            position: absolute;
            margin-left: -300px;
            z-index: 101; /* Ensure it sits on top of other content */
            width: 302px;
            height: 412px;
            // background: #FFFFFF;
            background-image: url('../../assets/img/navigation/qrCode-frame.png'); /* 替换为实际的图片路径 */
            background-size: cover; /* 确保背景图像覆盖整个容器 */
            background-position: center; /* 将背景图像居中对齐 */
            background-repeat: no-repeat; /* 避免背景图像重复 */
            box-shadow: 0px 3px 20px 1px rgba(0,0,0,0.17);
            border-radius: 16px 16px 16px 16px;
        }
        
        .saveQrCode{
            width: 132px;
            height: 39px;
            background: #FFFFFF;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #0052D9;
            font-size: 12px;
            color: #0052D9;
        }

        .shareQrCode{
            margin-left: 10px;
            width: 132px;
            height: 39px;
            background: #0052D9;
            border-radius: 8px 8px 8px 8px;
            color: #FFFFFF;
            font-size: 12px;
        }
        
    }
    ::v-deep .enterpriseName .el-input__inner {
        width: 100px;
        height: 24px;
        background-color: #F8F9FA;
        text-align: center;
        border-color: #F8F9FA;
        color:#000;
        border: 0px solid #DCDFE6;
        padding:0px 0px;
        text-align: left;
        font-size: 14px;
    }

  </style>
  